<template>
  <div class="activityParticulars">
    <el-card shadow="never">
      <div class="header">
        <div class="page-header">
          <el-page-header @back="goBack" content="日常活动" style="margin-bottom: 20px">
          </el-page-header>
        </div>

        <div class="activity">
          <!--     标题     -->
          <div style="display: flex;justify-content: center;border-bottom: 1px #efefef solid;padding-bottom: 20px">
            <h2 style="font-weight: 500">{{activityTable.activityTitle}}</h2>
          </div>
          <div style=" text-indent: 2em">
            <Editor
                style="min-height: 500px; overflow-y: hidden;"
                v-model="activityTable.activityContent"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
            />
          </div>
          <div style="padding: 30px">
            <div style="margin-bottom: 10px">活动地点：{{ activityTable.activityPlace }}</div>
            <div style="margin-bottom: 10px">人数：{{ (activityTable.activityHuman) }}</div>
            <div style="margin-bottom: 10px">
              <span style="margin-right: 50px">活动开始时间：{{ shortTimeChina(activityTable.activityStarttime) }}</span>
              <span>活动结束时间：{{ shortTimeChina(activityTable.activityEndtime) }}</span>
            </div>
            <div>
              <span style="margin-right: 50px">报名开始时间：{{ shortTimeChina(activityTable.activityBegintime) }}</span>
              <span>报名结束时间：{{ shortTimeChina(activityTable.activityDeadline) }}</span>
            </div>
          </div>

          <div style="display: flex;justify-content: flex-end">
            <span>发布时间（{{ shortTimeChina(activityTable.activityReleasetime) }}）</span>
          </div>

          <div style="display: flex;justify-content: center">
            <el-button type="success" plain @click="toAddActivity">我要报名</el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {shortTimeChina} from "../../../../utils/timeFormat";
import {addActivity, getActivityById} from "@/api/allApi";
import {Editor} from "@wangeditor/editor-for-vue";

export default {
  components: {Editor},
  data() {
    return {
      activityTable:{},
      user:'',
      editor: null,
      editorConfig: {
        placeholder: '请输入内容...',
        readOnly: true
      },
      mode: 'simple', // or 'simple'
    }
  },
  created() {
    this.user = JSON.parse(window.localStorage.getItem('access-user'))
  },
  methods:{
    addActivity,
    shortTimeChina,
    getActivityById() {
      getActivityById(this.$route.params.activityId).then(res=>{
        this.activityTable = res.data.data
      })
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    goBack() {
      this.$router.back();
    },
    toAddActivity() {
      if (this.user == null){
        this.$message({
          message: '请先登录',
          type: 'warning'
        });
        return
      }
      this.$router.push({
        name: "addRegistration",
        params:{
          activityType:1,
          activityId:this.activityTable.activityId
        }
      });
    }

  },
  mounted() {
    this.getActivityById()
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>

<style lang="less" scoped>
  .activityParticulars {
    width: 80%;
    margin: 30px auto;
    min-width: 900px;
    flex-wrap: wrap;
    border-radius: 5px;
  }
</style>